<template>
	<view>
		<view class="form_info " v-for="(items, key) in runsetinfo" :key="key">
				<view class="form_info_l ">
					{{ items.name }}
					<i class="icon" v-if="items.not_null">&#xe83d;</i>
				</view>
				<view class="form_info_r">
					<input type="text" placeholder-class="place" 
					v-if="items.type == 'text'" 
					
					v-model="items.value" 
					:placeholder="'请输入您的' + items.name" />
					<input type="number" 
					placeholder-class="place" 
					:placeholder="'请输入您的' + items.name" 
					v-model="items.value" 
					v-if="items.type == 'number'" />
					<view class="choose_date" v-if="items.type == 'radio'"  >
						<input 
						type="text" disabled="true" 
						v-model="items.value"
						:placeholder="'请选择您的'+items.name"
						placeholder-style="color:#999999;font-size:28upx" />
						<picker :range="items.data_sex" range-key="label" @change="changesex($event,index,key)" class="pick" >
							<i class="icon">&#xe649;</i>
						</picker>
					</view>
					<!-- 出生日期 -->	
					<view class="choose_date" v-if="items.type == 'date'"  >
						<input 
						type="text" disabled="true" 
						v-model="items.value"
						placeholder="请选择您的出生日期"
						placeholder-style="color:#999999;font-size:28upx" />
						<picker class="pick" mode="date" 
						  :start="items.start_date ? items.start_date : startDate"
						  :end=" items.end_date ? items.end_date : endDate " @change="pickchange($event,index,key)"  >
							<i class="icon">&#xe637;</i>
						</picker>
					</view>
					<view class="choose_date" v-if="items.type == 'select'"  >
						<input 
						type="text" disabled="true" 
						v-model="items.value"
						:placeholder="'请选择您的'+items.name"
						placeholder-style="color:#999999;font-size:28upx" />
						<picker :range="items.data" range-key="label" @change="changecard($event,index,key)" class="pick" >
							<i class="icon">&#xe649;</i>
						</picker>
					</view>
				</view>
			
			</view>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 0;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				club_id:'',
				runsetinfo:[],
				startDate:getDate('start'),
				endDate:getDate('end'),
			}
		},
		onLoad(options) {
			this.club_id = options.clubid
		},
		mounted() {
			this.runset()
		},
		methods: {
			runset () {
				this.ajax('club/clubSetting', {
					data: {
						club_id: this.club_id
					},
					success: res => {
						 // console.log (res)
						var form= res.msg.in_form
						form.forEach( (item) => {
							item.value= ''
							if(item.name == '性别' && !item.limit) {
								item.data_sex = [{ label: '男', value: '0' }, { label: '女', value: '1' }];
							}else // 将时间限制 的时间戳转为时间模式
							if( item.name == '生日' && item.limit) {
								item.start_date = this.get_D(item.data[0])
								item.end_date = this.get_D(item.data[1])
							}
						})
						this.runsetinfo = res.msg.in_form
					}
				})
			},
			// 时间戳转为时间
				get_D (dt) {
					 dt = new Date(dt);
					let year = dt.getFullYear();
					let month = dt.getMonth() + 1;
					let day = dt.getDate();
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return  `${year}-${month}-${day}`;
				},
		}
	}
</script>

<style lang="less" scoped>
.form_info {
			width: calc(100% - 60upx);
			margin: auto;
			height: 102upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #e1e1e1;
			box-sizing: border-box;
			.form_info_l {
				width: 180upx;
				font-size: 28upx;
				position: relative;
				padding-left: 26upx;
				box-sizing: border-box;
				.icon {
					position: absolute;
					font-size: 20upx;
					color: #d81e06;
					left: 0;
					top: 4upx;
				}
			}
			.form_info_r {
				flex: 1;
				height: 80upx;
				display: flex;
				align-items: center;
				text-align: right;
				input {
					width: 100%;
					// border: 2upx solid #e1e1e1;
					// box-sizing: border-box;
					// border-radius: 6upx;
					// padding-left: 30upx;
					font-size: 28upx;
					color: #333333;
				}
				.choose_date {
					width: 100%;
					height: 100%;
					// position: relative;
					display: flex;
					align-items: center;
					.pick {
						// position: absolute;
						// right: 10upx;
						// top: 50%;
						// transform: translateY(-50%);
						width: 55upx;
						height: 40upx;
						text-align: center;
						line-height: 40upx;
						.icon {
							font-size: 32upx;
							height: 32upx;
							color: #999999;
						}
					}
				}
				radio-group {
					display: flex;
					align-items: center;
					.uni-list-cell {
						display: flex;
						align-items: center;
						margin-right: 20upx;
						.uni-list-cell_radio {
							transform: scale(0.6);
						}
						.uni-list-cell_label {
							font-size: 28upx;
							color: #333333;
							line-height: 32upx;
						}
					}
				}
			}
		}
		.form_info:last-child {
				border-bottom: 0;
			}
</style>
